<template>
	<scroll-view
		:scroll-y="true"
		@scrolltolower="getListData"
		:refresher-enabled="true"
		@refresherrefresh="refreshData"
		:refresher-triggered="refresherTriggered"
		class="container"
	>
		<view
			v-for="(order, index) in orders.list"
			:key="index"
			:style="{
				margin: `15rpx 30rpx`,
				padding: `30rpx`,
				boxShadow: `0 0 16rpx 0 rgba(0, 0, 0, 0.15)`,
			}"
			class="section fs-28 color-666 br-10 bgc-fff"
		>
			<text
				:style="{
					backgroundColor: `rgba(${
						Number(order.type) === 2
							? '247, 148, 47'
							: Number(order.type) === 3
							? '27, 129, 242'
							: ''
					}, 0.23)`,
				}"
				class="badge"
			>
				{{ serviceName }}
			</text>

			<label class="mb-30">
				<image
					class="width-68 height-68 br-circle bgc-eee"
					:src="order.headimgurl"
					mode="aspectFill"
				/>
				<view class="ml-12">
					<text class="color-1b1b1b fs-28">
						{{ order.name || "--" }}
					</text>
					<text class="color-999 fs-22"> 订单编号：{{ order.order_no }} </text>
				</view>
			</label>
			<view class="fd-row">
				<view class="lh-2 f1 oh">
					<label v-for="(option, optionKey) in order.options" :key="optionKey">
						<text>{{ option.name }}：</text>

						<view
							v-if="optionKey.includes('address')"
							@click="viewPosition(option.value, optionKey)"
							class="f1 oh fd-row ai-center"
						>
							<text class="f1 ellipsis">
								{{ option.value.name || "--" }}
							</text>
							<image
								class="width-32 height-32"
								src="/static/images/icon-position.png"
								mode="aspectFit"
							/>
						</view>
						<text v-else class="f1 ellipsis">
							{{ option.value }}
						</text>
					</label>

					<block v-if="order.showMore">
						<label>
							<text>费用：</text>
							<text class="color-f33"> ￥{{ order.amount }} </text>
						</label>
						<view>
							<text>货品图片:</text>
							<view class="f1 flex-wrap oh mr-10">
								<image
									v-for="(photo, photoIndex) in order.pictures"
									:key="photoIndex"
									:style="{
										width: `112rpx`,
										height: `112rpx`,
									}"
									:src="photo"
									@click="previewPhoto(option.value, photoIndex)"
									class="bgc-eee br-10 ml-10 mb-10"
									mode="aspectFill"
								/>
							</view>
						</view>
					</block>
				</view>
				<view class="jc-end">
					<uni-icons
						@click="showMore(index)"
						:style="{ padding: '10rpx 30rpx' }"
						:type="order.showMore ? 'arrowup' : 'arrowdown'"
					/>
				</view>
			</view>

			<view :style="{ borderTop: `2rpx solid #f8f8f8` }" class="fd-row jc-sb pt-30 mt-30">
				<label @click="callPhone(order.phone)">
					<image
						class="width-50 height-50"
						src="/static/images/icon-callPhone.png"
						mode="aspectFit"
					/>
					<text class="fs-26 color-999 ml-14">联系ta</text>
				</label>
				<button
					class="border-none bgc-3ec483 color-fff fs-26 pl-66 pr-66 br-34 ml-0 mr-0"
					:plain="true"
					hover-class="tap-hover"
					@click="receiveOrder(index)"
				>
					接单
				</button>
			</view>
		</view>
		<uni-load-more :status="loadStatus" :showIcon="!refresherTriggered" />
	</scroll-view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import uniLoadMore from "@/components/uni-load-more.vue";
	import { Pager } from "@/common/type";
	import uniIcons from "@/components/uni-icons.vue";

	let requestFlag: boolean = false;
	@Component({ components: { uniLoadMore, uniIcons } })
	export default class Home extends Vue {
		// component property
		loadStatus: string = "loading";
		orders: Pager<AnyObject> = {
			list: [],
			page: 1,
			size: 10,
		};
		refresherTriggered: boolean = false;

		public get identity(): number {
			return this.$store.state.identity;
		}

		public get serviceName(): string {
			return `${{ 2: "搬运", 3: "安装" }[this.identity as 2 | 3]}\n服务`;
		}

		created() {
			this.refresherTriggered = true;
		}

		refreshData() {
			this.refresherTriggered = true;
			this.orders.page = 1;
			this.orders.list = [];
			this.getListData();
		}

		getListData() {
			const { $request, orders, identity, refresherTriggered } = this;
			if (requestFlag || !orders.page) return;
			(requestFlag = true), (this.loadStatus = "loading");

			$request
				.get("/order/waitinglist", {
					type: ({ 2: 3, 3: 2 } as AnyObject)[identity],
					page: orders.page,
					size: orders.size,
				})
				.then(({ data }) => {
					orders.list.push(...data.list);
					orders.page = +data.page * orders.size < data.total ? ++data.page : 0;
					this.loadStatus = orders.page ? "more" : "noMore";
				})
				.finally(() => {
					refresherTriggered && (this.refresherTriggered = false);
					requestFlag = false;
				});
		}
		callPhone(phoneNumber: string) {
			uni.makePhoneCall({ phoneNumber });
		}
		viewPosition(option: AnyObject, key: string) {
			uni.openLocation(
				option as {
					latitude: number;
					longitude: number;
					[key: string]: any;
				}
			);
		}
		receiveOrder(index: number) {
			this.$request
				.get("/order/receiving", {
					id: this.orders.list[index].id,
					type: { 2: 3, 3: 2 }[this.identity as 2 | 3],
				})
				.then(({ errmsg: title }) => {
					uni.showToast({
						title,
						success: () =>
							setTimeout(() => {
								uni.switchTab({ url: "/pages/tabs/Order" });
								this.$store.commit("changeOrderTabIndex", 0);
							}, 1500),
					});
				});
		}
		showMore(index: number) {
			this.orders.list[index].showMore = !this.orders.list[index].showMore;
		}
		previewPhoto(urls: string[], current: any) {
			uni.previewImage({ urls, current });
		}
	}
</script>
<style lang="scss" scoped>
	// scss
	label.active {
		position: relative;
		color: #1b1b1b;
		&::before {
			content: "";
			position: absolute;
			width: 50rpx;
			bottom: 0;
			height: 3px;
			border: 6rpx solid #3ec483;
			border-radius: 0 0 50% 50%/0 0 100% 100%;
			border-top: none;
		}
	}
	.section {
		position: relative;
		.badge {
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100rpx;
			height: 100rpx;
			color: #1b1b1b;
			font-size: 28rpx;
			border-radius: 0 10rpx 0 10rpx;
		}
	}
</style>